<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Flying Colors Demo</title>

    <style>
    .keyword {
        font-weight: bold;
        color: crimson;
    }

    .value {
        color: royalblue;
    }

    .string {
        color: orange;
    }

    .operator {
        color: red;
    }

    .property {
        color: seagreen;
    }

    .comment {
        color: gray;
    }

    .date:before {
        content: "";
        display: inline-block;
        width: 16px; height: 16px;
        background-image: url();
    }
    </style>

    <script src="flyingcolors.min.js"></script>
</head>
<body>
    <h1>Before</h1>
    <pre id="before">
el["addEventListener"]('click', function () {
    for (var i = Things.length - 1; i >= 0; i--) {
        if (true) {};
        $( "#foo" ).get( 0 ); 
        function() {
                for /*(var i = 0; i < Things.length; i++) {
                    Th*/ings[i]
                };
            } while ()
        };
    };
}, false);
    </pre>

    <h1>After</h1>
    <pre id="after">
el["addEventListener"]('click', function () {
    for (var i = Things.length - 1; i >= 0; i--) {
        if (true) {};
        $( "#foo" ).get( 0 ); 
        function() {
                for /*(var i = 0; i < Things.length; i++) {
                    Th*/ings[i]
                };
            } while ()
        };
    };
}, false);
    </pre>

    It is 10/6/2013.

    <script>
    flyingcolors("#after", {
        "value": /\b(true|false|null|undefined|\d+)\b/g,
        "string": /('[^']*')|("[^"]*")/g,
        "keyword": /\b(break|case|catch|continue|debugger|default|delete|do|else|finally|for|function|if|in|instanceof|new|return|switch|this|throw|try|typeof|var|void|while|with)\b/g,
        "property": /\b(length|document|window|screen|location)\b/g,
        "comment": /(\/\/.*)|(\/\*[\S\s]*\*\/)/g,
    });
    flyingcolors(document.body, {
        "date": /\b(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}\b/g,
    });
    </script>
</body>
</html>
